<template>
  <div id="craftsmanServices" :class="{ smallFontSize: showEdition, mediumFontSize: !showEdition }">
    <!--<div class="title">-->
    <!--<span @click="onClickLeft" style="position: absolute;left: 5px;display: flex;align-items: center;font-size: 14px;">-->
    <!--<van-icon name="arrow-left" />-->
    <!--返回-->
    <!--</span>-->
    <!--工匠服务-->
    <!--</div>-->
    <div class="top" v-show="$route.query.data">
      <img style="width: 80%; margin: 0 auto" src="https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/SQ/4.png" />
      <p>
        <span :class="showMoble ? '' : 'PADD1'" style="width: 22%; display: inline-block; text-align: center">申请</span>
        <span style="width: 25%; display: inline-block; text-align: center">选图选工匠</span>
        <span style="width: 25%; display: inline-block; text-align: center">签订合同</span>
        <span :class="showMoble ? '' : 'PADD2'" style="width: 21%; display: inline-block; text-align: center">竣工验收</span>
      </p>
    </div>
    <van-tabs v-model="active">
      <van-tab title="工匠服务">
        <div style="padding: 4px">
          <!-- <van-cell-group>
        <van-field :class="{smallFontSize:showEdition,mediumFontSize:!showEdition}" right-icon="search" style="
           width: calc(100% - 120px);
           background: #EEE;
           border-radius: 10px;
           height:40px;
           font-size: 14px;
           float: left" v-model="value" @click-icon="handleserch" placeholder="请输入姓名/联系电话" />
      </van-cell-group>-->
          <form action="/">
            <van-search
              style="width: calc(100% - 120px); background: #eee; border-radius: 10px; height: 40px; font-size: 14px; float: left"
              v-model="value"
              placeholder="请输入姓名/联系电话"
              @search="onSearch" />
          </form>
          <!-- 需要显示区筛选条件 -->
          <span style="width: 120px; height: 40px; display: inline-block; line-height: 40px; font-size: 14px; text-align: center">共计：{{ totalCount }}人</span>
        </div>
        <div class="down-search">
            <!-- <van-dropdown-menu :active-color="color">
              <van-dropdown-item v-for="(item, index) in Option1" :key="index" @change="handlegetData" v-model="formData1[item.value]" :options="item.option" />
            </van-dropdown-menu> -->
          </div>
        <div class="content">
          <van-list v-model="loading" :finished="finished" :offset="10" finished-text="没有更多了" @load="onLoad">
            <div class="van-clearfix">
              <ul style="font-size: 16px">
                <li v-for="(item, index) in contentData" @click="contentClick(item)" :key="index">
                  <div class="yuanPhoto">
                    <span style="color: #fff">{{ item.artisanName.substring(1) }}</span>
                  </div>
                  <div style="width: 64%; margin-left: 20px">
                    <p style="line-height: 40px">
                      <span>{{ item.artisanName }}</span>
                      <span style="float: right">
                        <img v-for="(item, index) in item.artisanGrade" src="https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/GJFW/16.png" :key="index" />
                      </span>
                    </p>
                    <p style="line-height: 40px">
                      <span>点赞量：{{ item.praiseNum }}次</span>
                      <span style="float: right">签约量：{{ item.signNum }}次</span>
                    </p>
                    <p style="display: flex; align-items: center">
                      <span style="width: 65%; margin-right: 10%">服务区域：{{ item.belongCountry || '暂无数据' }}</span>
                      <span
                        v-if="item.workerType"
                        style="
                          float: right;
                          color: #30c47a;
                          width: 70px;
                          height: 31px;
                          background: rgba(48, 196, 122, 0.1);
                          border-radius: 4px;
                          display: inline-block;
                          line-height: 31px;
                          text-align: center;
                          overflow: hidden;
                          white-space: nowrap;
                          text-overflow: ellipsis;
                        "
                        >{{ item.workerType }}</span
                      >
                    </p>
                    <p style="display: flex; align-items: center; line-height: 40px">常驻区域：{{ item.contactAddress || '暂无数据' }}</p>
                  </div>
                </li>
              </ul>
            </div>
          </van-list>
        </div>
      </van-tab>
      <van-tab title="工匠收藏">
        <div style="height: 60vh; text-align: center; padding-top: 20vh" v-if="contentData1.length == 0">
          <div style="margin-bottom: 10px">
            <img src="https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/DSF/50.png" />
          </div>
          <div>暂无数据</div>
        </div>
        <div class="content" v-if="contentData1.length > 0">
          <ul>
            <li v-for="(item, index) in contentData1" @click="contentClick1(item)" :key="index">
              <div class="yuanPhoto">
                <span style="color: #fff">{{ item.artisanName ? item.artisanName.substring(1) : '无' }}</span>
              </div>
              <div style="width: 64%; margin-left: 20px">
                <p style="height: 40px; line-height: 40px">
                  <span>{{ item.artisanName }}</span>
                  <span style="float: right">
                    <img v-for="(item, index) in Number(item.starLevel)" src="https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/GJFW/16.png" :key="index" />
                  </span>
                </p>
                <p style="height: 40px; line-height: 40px">
                  <span>点赞量：{{ item.praiseNum }}</span>
                  <span style="float: right">签约量：{{ item.signNum }}次</span>
                </p>
                <p style="height: 40px; display: flex; align-items: center">
                  <span style="width: 65%; margin-right: 10%">服务区域：{{ item.serviceArea }}{{ item.belongCountry }}</span>
                  <span
                    v-if="item.workerType"
                    style="
                      float: right;
                      color: #30c47a;
                      width: 54px;
                      height: 31px;
                      background: rgba(48, 196, 122, 0.1);
                      border-radius: 4px;
                      display: inline-block;
                      line-height: 31px;
                      text-align: center;
                    "
                    >{{ item.workerType }}</span
                  >
                </p>
              </div>
            </li>
          </ul>
        </div>
      </van-tab>
    </van-tabs>
    <van-popup v-model="AddGJ" round position="bottom" :style="{ height: '60%' }">
      <div style="text-align: center">新增工匠</div>
      <SNWGJADD />
    </van-popup>
  </div>
</template>
<script>
import { Artisans, ArtisanCollection } from '../../utils/api'
import { binl2b64 } from '../../utils/md5'
import SNWGJADD from './SNWGJADD.vue'
import { Toast } from 'vant'
// import { json } from "stream/consumers";
export default {
  data() {
    return {
      showEdition: false,
      AddGJ: false,
      formData1: {
        value1: -1,
        value2: -1,
        value3: -1,
        value4: -1,
        value5: -1
      },
      Option1: [
        {
          option: [
            { text: '服务区域', value: -1 },
            { text: '杭州', value: "330282000000" },
            { text: '宁波', value: "330600000000" },
            { text: '嘉兴', value: "330400000000" }
          ],
          value: 'value1'
        },
        {
          option: [
            { text: '工种类型', value: -1 }
            // { text: '全部商品', value: 0 },
            // { text: '新款商品', value: 1 },
            // { text: '活动商品', value: 2 }
          ],
          value: 'value2',
          title: '工种类型'
        },
        {
          option: [
            { text: '签约量', value: -1 }
            // { text: '全部商品', value: 3 },
            // { text: '新款商品', value: 4 },
            // { text: '活动商品', value: 5 }
          ],
          value: 'value3',
          title: '签约量'
        },
        {
          option: [
            { text: '星级', value: -1 }
            // { text: '22', value: 0 },
            // { text: '新款22商品', value: 1 },
            // { text: '22', value: 2 }
          ],
          value: 'value4',
          title: '星级'
        },
        {
          option: [
            { text: '点赞量', value: -1 }
            // { text: '111', value: 0 },
            // { text: '11', value: 1 },
            // { text: '11', value: 2 }
          ],
          value: 'value5',
          title: '点赞量'
        }
      ],
      contentData: [],
      contentData1: [],
      value: '',
      active: 0,
      loading: false,
      finished: false,
      totalCount: 0,
      showMoble: true,
      index: 0,
      ConditionalFiltering: [
        {
          name: '服务区域',
          icon: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/GJFW/13.png'
        },
        {
          name: '工种类型',
          icon: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/GJFW/13.png'
        },
        {
          name: '签约量',
          icon: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/GJFW/12.png'
        },
        {
          name: '星级',
          icon: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/GJFW/12.png'
        }
        // {
        //   name: '点赞量',
        //   icon: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/GJFW/12.png'
        // }
      ]
    }
  },
  methods: {
    onClickLeft() {
      this.$router.push({
        path: '/ZLJIndex'
      })
    },
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      this.index += 1
      this.getData()
      this.getGJ()
    },
    handlegetData(data){
        console.log(data)
        this.getData(data)
    },
    contentClick(item) {
      console.log(item)
      this.$router.push({
        path: 'CraftsmanDetails',
        query: {
          data: JSON.stringify(item),
          id: this.$route.query.id,
          type: this.typeData,
          datas: JSON.stringify(this.$route.query.data)
        }
      })
      this.$store.commit('getGJQY', item)
    },
    contentClick1(item) {
      this.$router.push({
        name: 'CraftsmanDetails',
        query: {
          data1: JSON.stringify(item),
          id: this.$route.query.id,
          name:'工匠收藏'
        }
      })
      this.$store.commit('getGJQY', item)
    },
    getGJ: async function (data) {
      let params = {
        accessCode: '29ff26f660fc47f79c15bff382eeca6d',
        appKey: '6738b790-69e8-11ec-a673-6805cab640a0',
        userId: window.localStorage.getItem('ISZHUCE'),
        pageNo: 1,
        pageSize: 1000
      }
      const res = await ArtisanCollection(params)
      res.data.data.pageList && res.data.data.pageList.length > 0 ? (this.contentData1 = res.data.data.pageList) : ''
      console.log(this.contentData1, 'hezhilong')
    },
    getData: async function (data) {
      let Base64 = require('js-base64').Base64
      console.log(this.typeData, 'hezhilong=======')
      let params = {
        accessCode: '7295a77b2730446c90684d4e0e33c255',
        appKey: '6738b790-69e8-11ec-a673-6805cab640a0',
        artisanName: '',
        bookNumber: '',
        cityCode: data?data:window.localStorage.getItem('citycodeChange') ? window.localStorage.getItem('citycodeChange') : '330282000000',
        pageNo: this.index,
        pageSize: 20
      }
      console.log(params, 'hezhilong=======')
      if (this.typeData) {
        if (this.$route.query.id) {
          if (window.localStorage.getItem('routerData') && window.localStorage.getItem('routerData') != undefined) {
            params.cityCode = window.localStorage.getItem('routerData')
          } else {
            try {
              params.cityCode = JSON.parse(this.$route.query.data).SCITY == null ? JSON.parse(this.$route.query.data).S : JSON.parse(this.$route.query.data).SCITY
              window.localStorage.setItem('routerData', JSON.parse(this.$route.query.data).SCITY == null ? JSON.parse(this.$route.query.data).S : JSON.parse(this.$route.query.data).SCITY)
            } catch (err) {}
          }
        }
      } else {
        if (window.localStorage.getItem('routerData') && window.localStorage.getItem('routerData') != 'undefined') {
          params.cityCode = window.localStorage.getItem('routerData')
        } else if (this.$route.query.data) {
          try {
            params.cityCode = JSON.parse(this.$route.query.data).SCITY == null ? JSON.parse(this.$route.query.data).S : JSON.parse(this.$route.query.data).SCITY
            window.localStorage.setItem('routerData', JSON.parse(this.$route.query.data).SCITY == null ? JSON.parse(this.$route.query.data).S : JSON.parse(this.$route.query.data).SCITY)
          } catch (err) {}
        }
      }
      if (this.$route.query.id1) {
        try {
          params.cityCode = JSON.parse(this.$route.query.dataValue).CUN.slice(0, 4) + '00000000'
          window.localStorage.setItem('routerData', params.cityCode)
        } catch (err) {}
      }
      if(data){
        params.cityCode = data
      }
      console.log(params, 'hezhilong=======')
      const res = await Artisans(params)
      if (res.data.code == 200 && res.data.data.pageList) {
        this.loading = false
        res.data.data.pageList.forEach((item) => {
          item.artisanName = item.artisanName.replace(' ', '+')
          item.artisanName = item.artisanName.replace('\n', '')
          item.artisanName = Base64.decode(item.artisanName)
        })
        this.contentData = this.contentData.concat(res.data.data.pageList) //追加数据
        debugger
        this.totalCount = res.data.data.totalCount
        console.log(res.data.data.pageList.length)
        if (res.data.data.pageList.length == 0) {
          //数据全部加载完成
          this.finished = true
        } else {
          this.finished = false
        }
        console.log(res.data.data.pageList, 'xiaohe')
      } else {
        this.finished = true
      }
    },
    onSearch: async function (val) {
      let Base64 = require('js-base64').Base64
      let params = {
        accessCode: '7295a77b2730446c90684d4e0e33c255',
        artisanName: val,
        bookNumber: '',
        cityCode: window.localStorage.getItem('citycodeChange') ? window.localStorage.getItem('citycodeChange') : '330282000000',
        pageNo: 1,
        pageSize: 1000
      }
      try {
        if (this.$route.query.id) {
          params.cityCode = JSON.parse(this.$route.query.data).SCITY == null ? JSON.parse(this.$route.query.data).S : JSON.parse(this.$route.query.data).SCITY
        }
      } catch (err) {}
      try {
        if (this.$route.query.id1) {
          params.cityCode = JSON.parse(this.$route.query.dataValue).CUN.slice(0, 4) + '00000000'
        }
      } catch (err) {}
      const res = await Artisans(params)
      res.data.data.pageList.forEach((item) => {
        item.artisanName = item.artisanName.replace(' ', '+')
        item.artisanName = item.artisanName.replace('\n', '')
        item.artisanName = Base64.decode(item.artisanName)
      })
      this.contentData = res.data.data.pageList
      this.totalCount = res.data.data.totalCount
      //搜索的结果为空的情况下提示用户是否自己新增工匠
      if (this.totalCount == 0 && this.$route.query.data) {
        this.$confirm({
          title: '提示',
          message: '工匠库未查询到工匠信息,是否手动添加工匠？',
          btn: {
            okText: '确定',
            cancelText: '取消'
          }
        })
          .then(() => {
            // do something
            this.AddGJ = true
          })
          .catch(() => {
            console.log('no')
          })
      }
    }
  },
  components: {
    SNWGJADD
  },
  mounted() {
    this.showEdition = this.$store.state.Edition
    this.typeData = this.$route.query.type
    if (ZWJSBridge) {
      ZWJSBridge.setTitle({
        title: '工匠服务'
      })
        .then((res) => {})
        .catch((err) => {})
    }
  }
}
</script>
<style lang="scss" scoped>
#craftsmanServices {
  height: 100vh;
  background: #ffffff;
  font-size: 14px;
  overflow-x: hidden;
  overflow-y: auto;

  .top {
    height: 70px;
    background: #ffffff;
    margin-bottom: 20px;
    padding-top: 25px;
    text-align: center;

    .origin {
      width: 22px;
      height: 22px;
      background: #007aff;
      border-radius: 50%;
      display: inline-block;
    }

    .line {
      width: 20vw;
      /*height: 1px;*/
      border: 1px dashed #007aff;
      display: inline-block;
    }
  }

  .title {
    width: 100%;
    height: 40px;
    background: #fff;
    line-height: 40px;
    text-align: center;
    font-size: 17px;
    position: relative;
  }

  .ConditionalTab {
    ul li {
      width: 20%;
      float: left;
      text-align: center;
      font-size: 12px;
      /*font-size: 14px;*/
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .content {
    clear: both;
    // height: calc(100vh - 90px);
    // overflow: auto;
    padding: 10px;

    .yuanPhoto {
      height: 100px;
      width: 100px;
      border-radius: 100px;
      position: relative;
      //   top: 40%;
      //   left: 40%;
      //   border: solid 10px purple;
      //   box-shadow: 0px 0px 0px 10px red, 0px 0px 0px 10px black inset;
      background: #3f8ffc;

      span {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 18px;
      }
    }

    ul li {
      //   height: 150px;
      border-bottom: 1px solid #d2d2d2;
      display: flex;
      align-items: center;
      position: relative;
    }
  }
}
</style>
